<template>
<div style="height:100%;background-color: #2d3a4b;">
  <div class="login-container">
    <!-- 首页三张图片 :logo、 主图 、卡片阴影 -->
      <!-- <img  class="bg_logo"   :src="bglogo" width="600px"  alt /> -->
      <!-- <img  class="bg_main"   :src="bgmain" width="600px"  alt /> -->
      <!-- <img  class="bg_aside"  :src="bgaside" width="80px"  alt /> -->
    <div class="front">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        auto-complete="on"
        label-position="left"
      >
        <div class="title-container">
          <h3 class="title">用户登录</h3>
        </div>
        <el-form-item prop="userName">
          <span class="svg-container">
          </span>
          <el-input
            ref="userName"
            prefix-icon="iconfont icon-xingmingyonghumingnicheng"
            v-model="loginForm.userName"
            placeholder="请输入你的用户名"
            name="userName"
            type="text"
            tabindex="1"
            auto-complete="on"
            clearable
           
          />
        </el-form-item>
        <el-form-item prop="password ">
          <span class="svg-container">
          </span>
          <el-input
            ref="password "
            prefix-icon="iconfont icon-yanzhengma"
            v-model="loginForm.password "
            placeholder="请输入你的密码"
            name="password "
            type="text"
            tabindex="1"
            auto-complete="on"
            clearable
          />
        </el-form-item>
       
        <el-button
          type="primary"
          class="loginBtn"
          @click.native.prevent="handleLogin"
          v-loading.fullscreen.lock="fullscreenLoading"
          element-loading-text="登录中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >登录</el-button>
      </el-form>
    </div>
  </div>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import { loginverify,verifyAuthcode } from "@/api/user";
export default {
  name: "Login",
  data() {
   
    return {
      isBtnSend:true,
      getThis:"",  // 倒计时数
      showCount:null,     //  显示倒计时
      timer:null,      // 计时器
      bglogo: require("../../assets/logo.png"),
      bgmain: require("../../assets/bgmain.png"),
      bgaside: require("../../assets/bg_aside.png"),
      loginForm: {
        userName:"watone",
        password:"WaTonE@$210"

        // phone: "",
        // captcha: "",
        // verifycode: ""
      },
      loginRules: {
        userName: [ 
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, message: '用户名不能少于三位', trigger: 'blur' }

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码不能少于6位数', trigger: 'blur' }
        ]
       
      },
      fullscreenLoading: false,
      redirect: undefined,
      codeUrl: ""
    };
  },
  mounted() {
    // this.randImgCode();
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
   

    handleLogin() {
      console.log('点击了登录')
      this.$refs.loginForm.validate(valid => {
      console.log('valid: ', valid);
        
        if (valid) {
          this.fullscreenLoading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              console.log('this.redirect',this.redirect)
              this.$router.push({ path:  "/" });
              this.fullscreenLoading = false;
            })
            .catch(() => {
              this.isBtnSend=true;
              this.loginForm.verifycode=''
              // this.randImgCode();
              this.fullscreenLoading = false;
            });
        } else {
          console.log("error submit!!");
          // this.loginForm.verifycode=''
          // this.randImgCode();
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #5c5c5c;
$cursor: rgb(102, 159, 224);
$dark_gray: #333333;
$light_gray: #ffffff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  width: 85%;
  margin: 0 auto;
  background-color: #2d3a4b;
  position: relative;
  text-align: center;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .bg_logo{
    position: absolute;
    top: 22vh;
    right: 40%;
    z-index: 2;
    margin-right: 100px;
  }
  .bg_main {
    position: absolute;
    top: 28vh;
    right: 40%;
    z-index: 1;
    margin-right: 100px;
  }
  .bg_aside{
    position: absolute;
    top: calc(25vh + 308px);
    right: calc(10% + 400px);
  }
 
  .el-form-item{
    margin-bottom: 10px;
  }
  .background {
    position: absolute;
    overflow: hidden;
  }
  .front {
    z-index: 1;
  }
  .login-form {
    // position: absolute;
    // right: 10%;
    width: 520px;
    height: 450px;
    // top: 25vh;
    padding: 40px 38px 0;
    overflow: hidden;
    background-color: #2d3a4b;
    // z-index: 10;
    .imgInput{
    .el-input__inner{
        border-top-right-radius: 0!important;
        border-bottom-right-radius: 0!important;
        // border-right: 0;
     }
    }
    .el-input__prefix {
      margin-left: 5px;
    }
    .el-input--prefix .el-input__inner {
    padding-left: 36px;
    }
    .el-form-item__content {
      line-height: 10px;
    }
    .loginBtn{
      // position: absolute;
      // width:520px;
      width: 100%;
      height: 45px;
      // bottom: 60px;
      // left: 50%;
      // transform: translateX(-50%);
      margin-top: 30px;
      font-size: 16px;
      border-radius: 8px;
      background: linear-gradient(95deg, #1277E0 0%, #409EFF 100%);
    }
  
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      color: #2F84DC;
      font-family: 'Microsoft YaHei';
      margin: 0px auto 30px auto;
      text-align: center;
      font-weight: bold;
      letter-spacing: 1px;
    }
  }

  .show-pwd {
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
    position: relative;
    top: 15px;
    right: 4px;
  }
  .code {
    height:40px;
    position: absolute;
    right: 0;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>



